<template>
  <div
    class="relative group cursor-pointer"
    @click="handlePreview"
    @mouseenter="showPreview = true"
    @mouseleave="showPreview = false"
  >
    <!-- 图片容器 -->
    <div
      class="relative overflow-hidden rounded-lg transition-all duration-200"
      :class="[
        showPreview ? 'shadow-lg ring-2 ring-primary/20' : 'shadow-sm',
        containerClass,
      ]"
    >
      <!-- 图片 -->
      <img
        :src="src"
        :alt="alt"
        class="w-full h-full object-cover transition-transform duration-300"
        :class="[showPreview ? 'scale-115' : 'scale-100', imageClass]"
        loading="lazy"
      />

      <!-- 遮罩层 -->
      <div
        v-if="showPreview"
        class="absolute inset-0 bg-black/40 flex items-center justify-center transition-opacity duration-200"
      >
        <!-- 预览按钮 -->
        <Button
          size="icon"
          variant="ghost"
          class="w-8 h-8 text-white hover:bg-white/20 transition-colors"
          @click.stop="handlePreview"
        >
          <svg
            class="w-4 h-4"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"
            />
          </svg>
        </Button>
      </div>
    </div>

    <!-- 插槽内容 -->
    <slot />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Button } from "./ui/button";

interface Props {
  src: string;
  alt?: string;
  containerClass?: string;
  imageClass?: string;
}

const props = withDefaults(defineProps<Props>(), {
  alt: "",
  containerClass: "",
  imageClass: "",
});

const emit = defineEmits<{
  preview: [src: string, alt: string];
}>();

const showPreview = ref(false);

function handlePreview() {
  emit("preview", props.src, props.alt);
}
</script>
